import React, { useState, useEffect } from 'react'
import { useHistory } from 'react-router-dom'
import { useDispatch, useSelector } from 'react-redux'
import CheckoutSteps from '@/components/CheckoutSteps'
import { message, Button, Radio } from 'antd'
import { setPaymentStore } from '@/stores/cart'
import { typePayment } from '@/types/cart'
import './index.scss'

const Payment = () => {
  const history = useHistory()
  const dispatch = useDispatch()
  const { address } = useSelector((state:any) => state.cart)
  const [payment, setPayment] = useState<typePayment>('wx')

  useEffect(() => {
    if (!address) {
      history.replace('/shipping')
      message.error('请先填写收货地址')
    }
  }, [])

  /**
   * 点击下一步，前往确认订单
   */
  const onclickNext = () => {
    dispatch(setPaymentStore(payment))
    history.push('confirm-order')
  }

  return (
    <div className="payment">
      <div className="steps">
        <CheckoutSteps current={2} />
      </div>
      <h1>选择支付方式</h1>
      <div className="ways">
        <Radio.Group
          onChange={(e) => setPayment(e.target.value)}
          value={payment}
        >
          <Radio value={'wx'}>微信</Radio>
          <Radio value={'zfb'}>支付宝</Radio>
        </Radio.Group>
      </div>
      <Button
        className="submit-btn"
        onClick={onclickNext}
        type="primary"
      >
        下一步
      </Button>
    </div>
  )
}

export default Payment
